<template>
  <div>
    <el-form ref="noticeFormRef" :model="noticeForm" :rules="noticeFormRules" label-width="120px">
      <el-form-item label="公告标题：" prop="title">
        <el-input
          v-model="noticeForm.title"
          placeholder="请输入公告标题："
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="公告内容：" prop="content">
        <el-input
          type="textarea"
          rows="5"
          v-model="noticeForm.content"
          placeholder="请输入公告内容："
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="上传图片：" prop="siteImgList">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="接受人：" prop="acceptPeo">
        <el-select
          style="width: 100%"
          v-model="noticeForm.acceptPeo"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择接受人"
        >
          <el-option
            v-for="item in acceptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接受组：" prop="acceptGroup">
        <el-select
          style="width: 100%"
          v-model="noticeForm.acceptGroup"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择接受组"
        >
          <el-option
            v-for="item in acceptGroupOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发送时间：" prop="sendTime">
       
        <el-date-picker
          style="width: 100%"
          v-model="noticeForm.sendTime"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="知音楼通知：" prop="isZylSend">
        <el-radio v-model="noticeForm.isZylSend" :label="0">通知</el-radio>
        <el-radio v-model="noticeForm.isZylSend" :label="1">不通知</el-radio>
      </el-form-item>
      <el-form-item label="重要消息：" prop="level">
        <el-radio v-model="noticeForm.level" :label="0">不重要</el-radio>
        <el-radio v-model="noticeForm.level" :label="1">一般</el-radio>
        <el-radio v-model="noticeForm.level" :label="2">重要</el-radio>
      </el-form-item>
      <div class="form-submit">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    noticeForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    // 校验公告标题
    function validTitle(_, value, callback) {
       
       if(!value){
         return callback(new Error('公告标题不能为空'));
       }
       if(value.length < 3 || value.length> 50){
         return callback(new Error('长度在 3 到 50个字符'));
       }
       const reg = /\d+/g;
       if(!reg.test(value)){
         return callback(new Error('内容只能是数字'));
       }
    }
    return {

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      // 表单的规则
      noticeFormRules:{
        title:[
           // validator自定义娇艳规则的属性
          { required: true,validator: validTitle, trigger: 'blur' } ,
        ],
        content:[
          { required: true, message: '请输入公告内容', trigger: 'blur' },
          { min: 3, max: 500, message: '长度在 3 到 500 个字符', trigger: 'blur' }
        ],
        acceptPeo:[{ required: true, message: '请选择接受人', trigger: 'change' }],
        acceptGroup: [
           { required: true, message: '请选择接受组', trigger: 'change' }
        ],
        isZylSend: [
           { required: true, message: '请选择是否通知', trigger: 'change' }
        ],
        level: [
           { required: true, message: '请选择消息等级', trigger: 'change' }
        ],
      },
      // 表单-接受人的配置项
      acceptOptions: [
        {
          value: "1",
          label: "张三",
        },
        {
          value: "2",
          label: "李四",
        },
        {
          value: "3",
          label: "王五",
        },
        {
          value: "4",
          label: "赵六",
        },
        {
          value: "5",
          label: "孙七",
        },
      ],
      // 表单-接受组的配置项
      acceptGroupOptions: [
        {
          value: "1",
          label: "组1",
        },
        {
          value: "2",
          label: "足2",
        },
        {
          value: "3",
          label: "组3",
        },
        {
          value: "4",
          label: "组4",
        },
        {
          value: "5",
          label: "组5",
        },
      ],
      // 日期选择器的快捷配置项
     pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
    };
  },
  created() {},
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    submitForm() {
      this.$refs['noticeFormRef'].validate((valid) => {
        console.log(valid);
         if (valid) {
           // 发请求
            console.log(12341)
          } else {
           return this.$message({
             message:'请检查格式后提交',
             type:'warning'
           })
          }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  padding: 20px 25px 20px 20px;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #fff;
}
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  width: 7px;
  height: 7px;
  background: @baseColor;
}
.form-submit {
  width: 100%;
  border-top: 1px solid @lineColor;
  text-align: right;
  padding: 5px 15px;
  line-height: 50px;
  .el-button {
    padding: 9px 21px;
    border-radius: 2px;
  }
}
</style>
